/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { useState } from 'react';
import { Popconfirm, Tooltip, Button, Menu, Dropdown, message } from 'antd';
import styles from './index.module.scss';
import SaveModal from './SaveModal';
import DetailModal from './DetailModal';
import { CHART_LINK } from 'src/pages/AnalyseManage/EditReport/topics';
import PubSub from 'pubsub-js';

interface IProps {
	isCurrent: boolean;
	handleDelete: ( key: string ) => void;
	id: string;
	isEdit: boolean;
	config: any;
	handleCopyItem: () => void;
	isChaining: boolean;
	setChaining: ( publisherId: string, isChaining: boolean ) => void;
	publisherId: string;
	drillChartsIds: Array<string>;
	cancelDrill: ( chartId ) => void;
}

const Tools = ( props: IProps ) => {
	const { isEdit, config, drillChartsIds } = props;
	const [ saveModalVisable, setSaveModalVisable ] = useState( false );
	const [ detailModalVisable, setDetailModalVisable ] = useState( false );

	const handleSaveClick = () => {
		const value = !saveModalVisable;
		setSaveModalVisable( value );
	};

	const handleViewData = () => {
		const { type } = props.config;
		if ( type === 'Gauge' || type === 'Bullet' || type === 'Quota' || type === 'Liquid' ) {
			message.warning( '此类图形暂无详情' );
			return;
		}
		setDetailModalVisable( true );
	};

	const toggleDetailModalVisable = () => {
		const visable = !detailModalVisable;
		setDetailModalVisable( visable );
	};

	//	取消图表联动
	const handleCancelChain = () => {
		PubSub.publish( CHART_LINK, {
			publisherId: props.id,
			listenerIds: props.config.mutual.chartsChainIds,
			dimension: [],
			tableCode: props.config.data.tableCode
		} );
		props.setChaining( props.id, false );
	};

	//	取消下钻
	const handleCancelDrill = () => {
		props.cancelDrill( props.id );
	};

	const menu = (
		<Menu>
		  <Menu.Item>
				<span onMouseDown={handleSaveClick}>
			  保存图表
				</span>
		  </Menu.Item>
		  <Menu.Item>
		  <span onMouseDown={handleViewData}>
			  查看详细数据
				</span>
		  </Menu.Item>
		</Menu>
	  );

	return (
		<div className={styles.chartHeader_tools} style={{ textAlign: isEdit ? 'left' : 'right' }}>
			{ props.publisherId === props.id && config.mutual.isChainAvailable && config.mutual.chartsChainIds.length > 0 && (
				<>
					{
						props.isChaining && (
							<Tooltip placement="topRight" title="本图表的下级图表将会恢复初始状态">
								<Button className={`bdh_button ${styles.chart_tip_item}`} type='primary' ghost size='small' onMouseDown={handleCancelChain}>取消下级联动</Button>
							</Tooltip>
						)
					}

					<Tooltip placement="topRight" title="本图表有下级联动">
						<Button className="bdh_button red-color" style={ { cursor: 'initial' } } type='text' icon={<span className="iconfont bdhgongyinglianbaobiao"></span>}></Button>
					</Tooltip>
				</>

			)
			}

			{
				drillChartsIds.includes( props.id ) && (
					<Tooltip placement="topRight" title="取消下钻">
						<Button className={`bdh_button ${styles.chart_tip_item}`} type='primary' ghost size='small' onMouseDown={handleCancelDrill}>取消下钻</Button>
					</Tooltip>
				)
			}

			{ isEdit && props.isCurrent && (
				<Tooltip placement="topRight" title="复制图表">
					<Button className="bdh_button" type='text' onMouseDown={props.handleCopyItem} icon={<span className="iconfont bdhfuzhi"></span>}></Button>
				</Tooltip>
			)
			}

			{ isEdit && props.isCurrent && (
				<Tooltip placement="topRight" title="移动图表">
					<Button className="bdh_button" type='text' icon={<span className="iconfont bdhyidong"></span>}></Button>
				</Tooltip>
			)
			}
			{ isEdit && props.isCurrent && (
				// <Tooltip placement="topRight" title="保存图表">
				// 	<Button className="bdh_button" onClick={handleSaveClick} type='text' icon={<span className="iconfont bdhgengduo"></span>}></Button>
				// </Tooltip>
				<Dropdown overlay={menu} placement="topCenter" arrow>
					<Button className="bdh_button" type='text' icon={<span className="iconfont bdhgengduo"></span>}></Button>
				</Dropdown>
			)
			}
			{/* { props.isCurrent && <Button type='text' icon={<span className="iconfont bdhgengduo"></span>}></Button>} */}
			{
				isEdit && props.isCurrent
				&&
				<Popconfirm
					placement="top"
					title='确定删除该图表？'
					onConfirm={() => {
						props.handleDelete( props.id );
					}} okText="确定" cancelText="取消">
					<Tooltip placement="topRight" title="删除图表">
						<Button type='text' className='bdh_button red-color' icon={<span className="iconfont bdhguanbi"></span>}></Button>
					</Tooltip>
				</Popconfirm>
			}

			<DetailModal
				currentConfig={props.config}
				modalVisible={detailModalVisable}
				cancelHandle={toggleDetailModalVisable}
				okHandle={toggleDetailModalVisable}
			></DetailModal>
			{<SaveModal currentConfig={props.config} modalVisible={saveModalVisable} onCancel={handleSaveClick} ></SaveModal>}
		</div>
	);
};

export default React.memo( Tools );
